﻿import React from 'react'
import IconDom from './IconDom'
import { Dropdown, Menu } from 'antd'
import { actions, connect } from 'mirrorx'
class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}

    this.logoutRequest = this.logoutRequest.bind(this)
  }

  logoutRequest () {
    T.ajax({
      url: '/logout',
      loading: true
    }).then((result) => {
      if (result.success) {
        let data = result.value || '/'
        window.location.href = data
      }
    })
  }

  render () {
    const { userInfo, verificationState } = this.props

    let vertiType = verificationState // UNVERIFIED 未审核",PENDING 审核中",APPROVED 通过",REJECTED 未通过"
    let vertiMsgMap = {
      UNVERIFIED: 'Unverified',
      PENDING: 'In verification',
      APPROVED: 'Verified',
      REJECTED: 'Verification Failed'
    }
    const userType = parseInt(userInfo.userType)
    const vertiFlag = vertiType === 'UNVERIFIED' || vertiType === 'REJECTED'
    const dropdownMenuList = (
      <Menu>
        {vertiType !== 'UNVERIFIED' && (userType === 2 || userType === 1) &&
        <Menu.Item>
          <a href='javascript:;' onClick={() => actions.routing.push({ pathname: '/page-profile' })}>Profile</a>
        </Menu.Item>
        }

        {vertiFlag &&
        <Menu.Item>
          <a href='javascript:;' onClick={() => actions.routing.push({ pathname: '/page-verification' })}>Verify</a>
        </Menu.Item>
        }

        <Menu.Item>
          <a href='javascript:;' onClick={() => actions.routing.push({ pathname: '/page-changepassword' })}>Security</a>
        </Menu.Item>

        <Menu.Item>
          <a href='javascript:;' onClick={this.logoutRequest}>Logout</a>
        </Menu.Item>

      </Menu>
    )

    return (
      <div className='header'>
        <div className='inner-header'>
          <img
            src='/assets/images/logo.png'
            className='ab-vertical logo'
            alt='logo' />
          <div className='ab-vertical right-user-info'>
            <span className='cursor-pointer' onClick={() => { location.href = '/' }}>
              <IconDom code='icon-homepage' className='icon-home' />
              <span className='word-span '>HomePage</span>
            </span>
            <span className='divider' />
            <Dropdown overlay={dropdownMenuList}>
              <span className='icon-user'>
                <IconDom code='icon-touxiang' className='icon-home' />
                <span className='word-span'>{userInfo.name}</span>
                <IconDom code='icon-arrow' className='icon-down f12 ml10' />
              </span>
            </Dropdown>

            <span
              className={'certi-status ' + (vertiFlag ? 'cursor-pointer' : 'certi-temp ')}
              onClick={() => { if (vertiFlag) { actions.routing.push({ pathname: '/page-verification' }) } }}
            >
              {vertiMsgMap[vertiType]}
            </span>
          </div>
        </div>
      </div>
    )
  }
}

export default connect(state => {
  return state.mainModel
})(App)
